<template>
	<view @click="goToCourse" class="flex">
		<!-- 封面 -->
		<view  class="margin-right" style="border: #55aaff solid 1rpx;box-shadow: #55aaff 2rpx 3rpx 5rpx;">
			<image :src="course.cover" mode="aspectFit" style="height: 280rpx;width: 250rpx;"> </image>
		</view>
		<!-- 书籍、期刊基本信息 -->
		<view class="flex flex-direction flex-sub" style="position: relative;">
			<view style="font-weight: 600; margin-bottom: 30rpx;" >{{course.title}}</view>
			<view v-if="course.totalTime" style="font-weight: 500;color: #666666;">
				<!-- 转化为百分比, 保留2位小数。 总时长为0则不显示-->
				已学{{Number( course.learnedTime/course.totalTime*100 ).toFixed(2)}}%
			</view>
			<view v-if="course.contentSubjectName" style="color: #999999;position: absolute;bottom: 2%;">
				上次学到：{{course.contentSubjectName}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			course:{
				type:Object
			}
		},
		methods: {
			goToCourse(){
				this.$Router.push({
					name:'courseDetail',
					params:{
						id: this.course.contentId,
					},
				});
			}
		}
	}
</script>

<style lang="scss">
</style>
